import { useNavigate } from "react-router-dom";
import { useState } from "react";
import { NavBar,Button } from 'react-vant';
import './style/myTell.css'
const MyTell: React.FC = () => {
    const [selectedOptions, setSelectedOptions] = useState<string[]>([]);
    const navigate = useNavigate();

    const options = [
        { icon: "🔍", label: "准确的皮肤分析" },
        { icon: "✏️", label: "护肤教育" },
        { icon: "🧴", label: "个性化护肤推荐" },
        { icon: "⏰", label: "实时皮肤监测" },
        { icon: "📝", label: "可定制的首选项" },
        { icon: "🧑‍🤝‍🧑", label: "无障碍支持和指导" },
        { icon: "🔑", label: "透明度和安全性" }
    ];

    const toggleOption = (label: string) => {
        setSelectedOptions(prev =>
            prev.includes(label)
                ? prev.filter(option => option !== label)
                : [...prev, label]
        );
    };

    const allSelected = options.length - selectedOptions.length < 5;

    return (
        <div className="myTell-container">
            <NavBar
                title="我的诉求"
                onClickLeft={() => {navigate('/info')}}
            />
            <p style={{fontSize: '30px',margin:"10px auto" }}>您想从 AI护肤 获得什么</p>
            <p style={{ fontSize: '13px',margin:"10px auto" }}>告诉我们您想要实现什么，我们将帮助您更接近您的目标。</p>
            <ul className="myTell-ul">
                {options.map(option => (
                    <li 
                    className={`myTell-li ${selectedOptions.includes(option.label) ? 'selected' : ''}`}
                    key={option.label} 
                    onClick={() => toggleOption(option.label)}>
                        <span>{option.icon}</span>
                        <span>{option.label}</span>
                    </li>
                ))}
            </ul>
            <Button 
            disabled={!allSelected} 
            onClick={() => navigate('/successful')}
            className="myTell-btn"
            >继续</Button>
        </div>
    );
};

export default MyTell;